<html>

<head></head>

<style>
  body {
    padding: 100px;
  }

  .fileDiv {
    float: left;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 12px;
    border: 1px solid #ccc;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .seled {
    border: 1px solid red;
    background-color: #D6DFF7;
  }

  h3 {
    text-align: center;
    padding-bottom: 50px
  }
</style>

<script type="text/javascript">

  (function () {

    document.onmousedown = function () {

      var selList = [];

      var fileNodes = document.getElementsByTagName("div");

      for (var i = 0; i < fileNodes.length; i++) {

        if (fileNodes[i].className.indexOf("fileDiv") != -1) {

          fileNodes[i].className = "fileDiv";

          selList.push(fileNodes[i]);

        }

      }

      var isSelect = true;

      var evt = window.event || arguments[0];

      var startX = (evt.x || evt.clientX);

      var startY = (evt.y || evt.clientY);

      var selDiv = document.createElement("div");

      selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";

      selDiv.id = "selectDiv";

      document.body.appendChild(selDiv);

      selDiv.style.left = startX + "px";

      selDiv.style.top = startY + "px";

      var _x = null;

      var _y = null;

      clearEventBubble(evt);

      document.onmousemove = function () {

        evt = window.event || arguments[0];

        if (isSelect) {

          if (selDiv.style.display == "none") {

            selDiv.style.display = "";

          }

          _x = (evt.x || evt.clientX);

          _y = (evt.y || evt.clientY);

          selDiv.style.left = Math.min(_x, startX) + "px";

          selDiv.style.top = Math.min(_y, startY) + "px";

          selDiv.style.width = Math.abs(_x - startX) + "px";

          selDiv.style.height = Math.abs(_y - startY) + "px";

          // ---------------- �ؼ��㷨 ---------------------  

          var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;

          var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;

          for (var i = 0; i < selList.length; i++) {

            var sl = selList[i].offsetWidth + selList[i].offsetLeft;

            var st = selList[i].offsetHeight + selList[i].offsetTop;

            if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {

              if (selList[i].className.indexOf("seled") == -1) {

                selList[i].className = selList[i].className + " seled";

              }

            } else {

              if (selList[i].className.indexOf("seled") != -1) {

                selList[i].className = "fileDiv";

              }

            }

          }

        }

        clearEventBubble(evt);

      }

      document.onmouseup = function () {

        isSelect = false;

        if (selDiv) {

          document.body.removeChild(selDiv);

          showSelDiv(selList);

        }

        selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;

      }

    }

  })();

  function clearEventBubble(evt) {

    if (evt.stopPropagation)

      evt.stopPropagation();

    else

      evt.cancelBubble = true;

    if (evt.preventDefault)

      evt.preventDefault();

    else

      evt.returnValue = false;

  }

  function showSelDiv(arr) {

    var count = 0;

    var selInfo = "";

    for (var i = 0; i < arr.length; i++) {

      if (arr[i].className.indexOf("seled") != -1) {

        count++;

        selInfo += arr[i].innerHTML + "\n";

      }

    }

    alert("共选择" + count + "个文件，分别是：" + selInfo);

  }

</script>

<body>
  <h3>按住鼠标左键不放，框选查看效果</h3>
  <div class="fileDiv">file1</div>

  <div class="fileDiv">file2</div>

  <div class="fileDiv">file3</div>

  <div class="fileDiv">file4</div>

  <div class="fileDiv">file5</div>

  <div class="fileDiv">file6</div>

  <div class="fileDiv">file7</div>

  <div class="fileDiv">file8</div>

  <div class="fileDiv">file9</div>
  <div class="fileDiv">file10</div>
  <div class="fileDiv">file11</div>
  <div class="fileDiv">file12</div>
  <div class="fileDiv">file13</div>
  <div class="fileDiv">file14</div>
  <div class="fileDiv">file15</div>
  <div class="fileDiv">file16</div>
  <div class="fileDiv">file17</div>

</body>

</html>